@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
}

.icon {
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 0;
    filter: var(--icon-color);
    user-select: none;
    -webkit-user-drag: none;
}

.icon-pel > div {
    @apply icon-m;
}
.icon-pel > button {
    @apply icon-m;
}
.icon-m {
    @apply h-8 w-8 relative cursor-pointer;
}
.icon-m > .icon {
    @apply h-6 w-6 top-1 left-1;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #ddd;
}
::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}
::-webkit-scrollbar-track {
    background: #0000;
}
::-webkit-scrollbar-button {
    border-radius: 10px;
    height: 8px;
    width: 8px;
    background-color: #ddd;
}
::-webkit-scrollbar-corner {
    background-color: #0000;
}

#main {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content min-content;
}

.setting_hide {
    opacity: 0;
    pointer-events: none;
}

#tree_mana {
    @apply flex gap-2 flex-col;
}
#tree_mana > div:nth-child(1) > div {
    @apply flex gap-1 items-center;
}
#tree_mana > div:nth-child(1) > div > :nth-child(1) {
    @apply flex-grow;
}
#tree_mana > div:nth-child(1) > div > div {
    @apply relative w-5 h-5 cursor-pointer;
}
#tree_mana > div:nth-child(1) > div > div > img {
    @apply absolute top-0 left-0 w-5 h-5;
}

.import_tree_b {
    @apply relative w-5 h-5 cursor-pointer;
}
.import_tree_b > img {
    @apply icon w-5 h-5;
}

#密码 {
    @apply flex flex-col gap-6;
}
#密码 > div > h2 {
    @apply font-medium text-xl;
}
#密码 > div > div {
    @apply flex flex-col;
}
#密码 > div a {
    @apply underline;
}
#设置 input,
#设置 textarea {
    @apply outline-none border-2 rounded px-1 focus:border-sky-500;
}
#设置 > div:not(#exit_setting) {
    width: 60%;
}
#设置 h2 {
    @apply font-semibold text-xl;
}
#设置 h3 {
    @apply font-semibold;
}

#rename {
    display: none;
}
.show_rename > e-select {
    display: none;
}
.show_rename > input {
    display: block !important;
}

#exit_setting {
    position: fixed !important;
}

#translators {
    @apply flex gap-2 flex-col p-2 overflow-auto relative;
}

e-translator {
    @apply flex gap-2 select-none;
}

e-translator > div:nth-child(1) {
    @apply relative w-fit h-fit rounded-lg border-2;
}
e-translator > div:nth-child(1):hover {
    @apply shadow-md;
}
e-translator > div:nth-child(1) > div:nth-child(1) {
    @apply relative flex items-center p-2 rounded-lg w-fit h-fit gap-1 z-10 bg-white;
}
e-translator > div:nth-child(1) > div:nth-child(1) > div:last-child {
    @apply relative w-2 h-2 shadow-sm rounded-full;
}
.zt_normal {
    @apply bg-gray-300;
}
.zt_ok {
    @apply bg-green-400;
}
.zt_error {
    @apply bg-red-400;
}
.waring {
    @apply outline-dashed outline-2 outline-yellow-400 rounded-sm;
}
.text {
    @apply absolute w-48 max-h-96 resize z-10 left-2 top-2 overflow-y-auto select-text opacity-0 pointer-events-none bg-white shadow-md p-1 rounded-sm;
}
.text_show {
    @apply opacity-100 pointer-events-auto;
}
.bg-stripes {
    background-color: #0f01;
    background-image: linear-gradient(
        135deg,
        #0bd40b80 10%,
        transparent 0,
        transparent 50%,
        #0bd40b80 0,
        #0bd40b80 60%,
        transparent 0,
        transparent
    );
    background-size: 7.07px 7.07px;
}
e-translator > div:nth-child(1):hover .add_b {
    @apply -bottom-2 bg-stripes pointer-events-auto;
}
e-translator > div:nth-child(1):hover .add_c {
    @apply -right-2 bg-stripes pointer-events-auto;
}
e-translator > div:nth-child(1):hover .rm {
    @apply bg-red-500 pointer-events-auto;
}

.add_b {
    @apply absolute w-full h-3 -bottom-0 left-0 transition-all rounded-b-lg pointer-events-none;
}
.add_c {
    @apply absolute h-full w-3 -right-0 top-0 transition-all rounded-r-lg pointer-events-none;
}
.rm {
    @apply absolute h-2 w-2 -right-1 -top-1 transition-all rounded-lg pointer-events-none;
}

e-translator > div:nth-child(2) {
    @apply flex gap-2 flex-col;
}

e-select {
    @apply relative;
}
.e-select-more {
    @apply absolute bg-white shadow-md p-1 rounded transition-opacity max-h-40 overflow-y-auto z-10;
}
.e-select-more > * {
    @apply transition rounded-sm;
}
.e-select-more > *:hover {
    @apply bg-gray-200;
}
.e-select-selected {
    @apply bg-gray-100;
}
.e-select-hide {
    @apply opacity-0 pointer-events-none transition-none;
}

#bar {
    grid-area: 1 / 1 / 2 / 3;
}

#input {
    grid-area: 2 / 1 / 3 / 2;
}

#input > textarea {
    min-height: 16em;
}

#text {
    @apply flex flex-col gap-2 overflow-y-auto p-2;
    grid-area: 2 / 2 / 3 / 3;
}
#text > div {
    @apply border-2 p-2 rounded-lg relative;
}
#text > div > div {
    @apply absolute right-1 top-1 cursor-copy;
}
#text > div > div > img {
    @apply w-4 h-4;
}

#translators {
    grid-area: 3 / 1 / 4 / 3;
}

@media (max-width: 768px) {
    #bar {
        grid-area: 1 / 1 / 2 / 3;
    }

    #input {
        grid-area: 2 / 1 / 3 / 3;
    }

    #input > textarea {
        min-height: 8em;
    }

    #text {
        grid-area: 3 / 1 / 4 / 3;
    }
    #translators {
        grid-area: 4 / 1 / 5 / 3;
    }
}
